<template>
  <div id="my">
    <header>
      <div class="up">
        <h1>饿了么</h1>
      </div>
    </header>
    <main>
      <section class="nav">
        <div class="img1">
          <img src="../../assets/img/logo.jpg" alt="" @click="go"/>
          <p class="position">更新</p>
        </div>
        <div class="text">
          <p>18291660250</p>
          <p>182****0250</p>
        </div>
        <p class="btn">账户设置</p>
      </section>
      <section class="blue">
        <div class="center">
          <div class="up">
            <h2>吃货卡</h2>
            <p>吃货豆: <span>1461</span></p>
            <p>〉</p>
          </div>
          <p>升级超级吃货卡，每月得无门槛红包，下单5倍返吃货豆</p>
        </div>
      </section>
      <section class="money">
        <div class="left">
          <h3>
            <span class="iconfont icon-hongbao1"></span>
            红包
          </h3>
          <p>7张今日到期</p>
        </div>
        <div class="right">
          <h3>
            <span class="iconfont icon-yueguanli"></span>
            余额
          </h3>
          <p>0元</p>
        </div>
      </section>
      <section class="tool">
        <div>
          <h4>常用工具</h4>
          <ul>
            <li>
              <van-icon name="location-o" size="20"/>
              <p>我的地址</p>
            </li>
            <li >
               <van-icon name="service-o" size="20"/>
              <p>我的客服</p>
            </li>
            <li  @click="$router.push('/collect')">
               <van-icon name="like-o" size="20"/>
              <p>店铺关注</p>
            </li>
            <li>
              <van-icon name="star-o" size="20"/>
              <p>评价有礼</p>
            </li>
          </ul>
        </div>
      </section>
      <section class="footer">
        <div class="l">
          <div class="c">
            <h5>邀好友赚现金</h5>
            <p>最高得15元</p>
            <div>
              <span class="iconfont icon-hongbao"></span>
            </div>
            <button>去邀请</button>
            <button>查佣金</button>
          </div>
        </div>
        <div class="r">
          <div class="c">
            <h5>邀好友赚现金</h5>
            <p>最高得15元</p>
            <div>
              <span class="iconfont icon-liwu"></span>
            </div>
            <button>立即关注</button>
          </div>
        </div>
      </section>
      <section class="footer">
        <div class="l">
          <div class="c">
            <h5>邀好友赚现金</h5>
            <p>最高得15元</p>
            <div>
              <span class="iconfont icon-hongbao"></span>
            </div>
            <button>去邀请</button>
            <button>查佣金</button>
          </div>
        </div>
        <div class="r">
          <div class="c">
            <h5>邀好友赚现金</h5>
            <p>最高得15元</p>
            <div>
              <span class="iconfont icon-liwu"></span>
            </div>
            <button>立即关注</button>
          </div>
        </div>
      </section>
      <div class="kongbai"></div>
    </main>
  </div>
</template>

<script>;
export default {
  methods:{
go(){this.$router.push("/login")}
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  box-sizing: border-box;
}
#my {
  display: flex;
  flex-direction: column;
}
header {
  height: 45px;
  background-color: rgb(246, 243, 243);
  z-index: 11;
}

header .up {
  height: 45px;
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
}

.up h1 {
  font-size: 22px;
  margin-top: 7px;
}

.up-center {
  width: 80px;
  height: 30px;
  background-color: rgb(253, 239, 239);
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 30px;
  border-radius: 15px;
  margin-top: 7px;
  margin-right: 10px;
}

.up section {
  width: 65px;
  height:30px;
  color: black;
}

/* main */
main {
  padding: 0 12px;
  flex: 1;
  overflow-y: scroll;
  background-color: rgb(246, 243, 243);
}

.nav {
  display: flex;
  justify-content: flex-start;
}

.img1 {
  width:50px;
  height: 50px;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
}

.nav {
  margin-top:15px;
  margin-bottom: 15px;
}

.nav img {
  width:50px;
  height: 50px;
}

.nav .position {
  background-color: rgba(0, 0, 0, 0.5);
  width:50px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #ccc;
}

.text {
  margin-left: 10px;
}

.text p:nth-child(1) {
  font-weight: 900;
  margin-top: 5px;
  margin-bottom: 3px;
}

.text p:nth-child(2) {
  font-size: 12px;
  color: #ccc;
}

.nav .btn {
  height:30px;
  border-radius:20px;
  padding: 3px;
  border: 1px solid black;
  margin-left:110px;
  font-size:12px;
  line-height: 30px;
  margin-top: 10px;
}

.blue {
  background-color: rgb(127, 127, 253);
  border-radius: 10px;
  height: 85px;
  position: relative;
  margin-bottom: 10px;
}

.blue .center {
  padding: 0 12px;
  border: 1px solid transparent;
}

.blue .up {
  color: #fff;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 10px;
}

.blue .up h2 {
  font-size:26px;
  border-right: 1px solid #fff;
  font-weight: 400;
  width: 90px;
  height:30px;
}

.blue .up p:nth-child(2) {
  margin-left: 15px;
}

.blue .up p:nth-child(3) {
  position: relative;
  right: -105px;
  top: 20px;
  font-size:20px;
}

.blue .up p span {
  font-size: 26px;
}

.blue p {
  font-size: 12px;
  color: rgb(235, 232, 232);
}
.money {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  height: 95px;
  text-align: center;
  border-radius:10px;
  margin-bottom: 10px;
}
.money .left,
.money .right {
  width: 188px;
}
.money .left h3,
.money .right h3 {
  margin-top: 20px;
  font-weight: 900;
  font-size: 19px;
}
.money .left h3 span,
.money .right h3 span {
  color: red;
}
.money .left p,
.money .right p {
  margin-top: 10px;
  color: #ccc;
  font-size: 14px;
}
.tool {
  height: 110px;
  background-color: #fff;
  margin-bottom:20px;
}
.tool div {
  padding: 5px 12px;
}
.tool h4 {
  font-size: 19px;
  margin-bottom: 20px;
}
.tool ul li span {
  font-size: 18px;
  font-weight: 900;
}
.tool ul p {
  margin-top: 10px;
}
.tool ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.footer .l,
.footer .r {
  width:170px;
  height: 175px;
  background-color: #fff;
  border-radius:10px;
}
.footer .l .c,
.footer .r .c {
  padding: 0 12px;
  border: 1px solid transparent;
}
.footer .l h5,
.footer .r h5 {
  font-size:19px;
  margin: 10px 0;
}
.footer .l p,
.footer .r p {
  font-size: 12px;
  margin-bottom: 10px;
}
.footer .l .c div,
.footer .r .c div {
  height:55px;
  background-color: rgba(250, 250, 250, 0.42);
}
.footer .l .c div span,
.footer .r .c div span {
  display: block;
  font-size: 40px;
  line-height:55px;
  margin-left: 50px;
  color: red;
}
.footer .l .c button {
  border: 1px solid black;
  border-radius:20px;
  padding: 3px 7px;
  margin-right: 5px;
  background-color: #fff;
}
.footer .r .c button {
  border: 1px solid black;
  border-radius: 0.2rem;
  padding: 0.03rem 0.07rem;
  background-color: #fff;
  margin-left:30px;
}
.kongbai {
  height: 50px;
}

</style>